<template>
  <!-- 法规平台 -->
  <div class="app-container">
    <!-- <h1>法规平台</h1> -->
    <el-button type="primary" @click="addEeleases">新增发放</el-button>
    <div class="boxlaw">
      <div class="comform">
        <ComForm
          ref="comForm"
          @EventReset="resetFn"
          @EventOnsubmit="queryFn"
          :list="comForm"
        >
        </ComForm>
      </div>

      <ComTable
        @handleCurrentChange="CurrentPageChangeFn"
        @handleSizeChange="currentPageSizeChangeFn"
        :key="random"
        :list="tableList"
        :modes="tableModes"
        :config="{ border: true, loading }"
        :pagination="{ total: paging.total, pageNum: paging.pageNum }"
      >
        <el-table-column #default="{ row }" align="left">
          <template>
            <!-- "
              $router.push({
                path: '/contentPlatform/laws/laws-details',
                query: row,
              })
            " -->
            <!-- v-hasPermi="['base:docModule:list']" -->
            <el-button
              @click="clickLook(row)"
              v-hasPermi="['market:cmVoucher:list']"
              plain
              size="mini"
              type="primary"
              >发放明细</el-button
            >
          </template>
        </el-table-column>
      </ComTable>
    </div>
    <com-dialog
      @EventClose="closeFn"
      :dialogVisible="dialogVisible"
      title="新增问金发放"
    >
      <el-form :model="addForm">
        <el-form-item label="商务姓名" prop="region">
          <el-select v-model="addForm.region" placeholder="请选择活动区域">
            <el-option label="区域一" value="shanghai"></el-option>
            <el-option label="区域二" value="beijing"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="问金金额" prop="">
          <el-input v-model="addForm"></el-input>
        </el-form-item>
      </el-form>
      <template name="footer">
        <el-button @click="closeFn"> 取消 </el-button>
        <el-button type="primary"> 保存 </el-button>
      </template>
    </com-dialog>
  </div>
</template>

<script>
import ComTable from "../../../components/comTable.vue";
import ComForm from "../../../components/comForm.vue";
// import { getdocGetTypeApi } from "@/wss/api/ContentSupervision.js";

import {
  getVoucherRatioListApi,
  getVoucherVoucherRatioGrantApi,
} from "@/wss/api/financial/voucherRatio.js";
import ComDialog from "../../../components/comDialog.vue";
export default {
  name: "laws",
  dicts: ["sys_normal_disable"],
  components: { ComForm, ComTable, ComDialog },

  data() {
    return {
      // 新增问金发放数据
      addForm: {},
      dialogVisible: false,
      initSelectValue: "",
      // 加载
      loading: false,
      paging: { pageNum: 1, pageSize: 10, total: 10 },
      // 切换筛选状态，不更新bug修复
      random: "",
      // 当前筛选的状态
      currentSelect: "",
      options: {
        value: "",
        title: "快速筛选",
        list: [
          {
            value: "",
            label: "全部",
          },
          {
            value: "0",
            label: "待编辑",
          },
          {
            value: "1",
            label: "审核中",
          },
          {
            value: "2",
            label: "审核失败",
          },

          {
            value: "4",
            label: "上架",
          },
          {
            value: "5",
            label: "下架",
          },
        ],
      },
      // 动态生成下拉列表的筛选条件
      dynamicFilter: {},
      // 表格的数据
      tableList: [],
      // 表格的列字段
      tableModes: [
        {
          type: "selection",
          label: "编号",
          mode: "index",
        },
        {
          showOverflowTooltip: true,

          width: 200,
          label: "月份",
          mode: "month",
          showOverflowTooltip: true,
        },
        {
          label: "时间段",
          mode: "timeQuantum",
        },
        {
          label: "发放人数",
          mode: "grantNumber",
          showOverflowTooltip: true,
        },
        {
          label: "发放问金总额",
          mode: "grantRental",
          showOverflowTooltip: true,
        },
        // {
        //   label: "发放问金总额",
        //   mode: "effectiveStatus",
        //   effectiveStatus: true,
        //   width: 100,
        //   align: "center",
        //   isShowTag: true,
        //   options: [
        //     {
        //       l: "有效",
        //       v: 0,
        //     },
        //     {
        //       l: "部分有效",
        //       v: 1,
        //       type: "warning",
        //     },
        //     {
        //       l: "失效",
        //       v: 2,
        //       type: "danger",
        //     },
        //     {
        //       l: "尚未生效",
        //       v: 3,
        //     },
        //   ],
        // },
        {
          label: "发放时间",
          mode: "grantTime",
        },
      ],
      comForm: {
        modes: [
          {
            placeholder: "请选择日期",
            formType: "select",

            mode: "month",
            label: "月份",
            value: "",
            select: [],
          },
        ],
      },
    };
  },

  mounted() {
    this.getVoucherVoucherRatioGrantFn(this.paging);
  },
  methods: {
    // 重设函数
    resetFn() {
      this.initSelectValue = "";
      this.romdom = Math.random();
      this.options.value = "";
      this.paging.status = "";
      console.log(this.paging, "重设");
    },
    // 当前页发生改变时候
    CurrentPageChangeFn(pageNUm) {
      this.paging.pageNum = pageNUm;
      this.getVoucherVoucherRatioGrantFn(this.paging);
    },
    // 页容量发生改变时候
    currentPageSizeChangeFn(pageSize) {
      this.paging.pageSize = pageSize;
      this.getVoucherVoucherRatioGrantFn(this.paging);
    },
    // 查询
    queryFn(arr) {
      arr.forEach((item) => {
        for (const key in item) {
          this.paging[key] = item[key];
        }
        this.paging.month?.split("~");
      });
      this.currentSelect = this.initSelectValue;
      console.log(this.paging, "查询");
      this.paging.pageNum = 1;
      this.getVoucherVoucherRatioGrantFn(this.paging);
    },
    // 获取列表数据
    async getVoucherVoucherRatioGrantFn(pagination = null) {
      this.loading = true;
      let arr = [],
        result = await getVoucherVoucherRatioGrantApi(pagination);

      console.log(result, "问金发放");
      if (result.code == 200) {
        this.tableList = JSON.parse(JSON.stringify(result.rows));
        this.paging.total = result.total;
        this.tableList.forEach((item) => {
          arr.push({ label: item.month, value: item.month });
        });

        this.comForm.modes[0].select = arr;

        this.loading = false;
      }
    },
    // 新增发放
    addEeleases() {
      this.dialogVisible = true;
    },
    // 关闭新增发放对话框
    closeFn() {
      this.dialogVisible = false;
    },
    // row每一行的数据，去发放详细
    async clickLook(row) {
      this.$router.push({ path: "/fnancialPlatform/AGR/AGR-detail" });
    },
  },
};
</script>

<style lang ="scss" scoped>
.comform {
  margin-top: 20px;
}
</style>